<!--轮播图组件-->

<template>
<div id="swpier">
 <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in state.images" :key="image">
        <img :src="image.pic" />
      </van-swipe-item>
    </van-swipe> 
</div>

</template>


<script>
import axios from 'axios'
import { getBanner } from "@/request/api/home.js";
import { reactive, onMounted } from 'vue';
export default {
  setup() {
    const state = reactive({
      images:[
      
    ],

    });
    onMounted(async ()=>{
       let res=await getBanner();
      state.images=res.data.banners
      console.log(res);
       
    })
    return { state };
  },
};
</script>

<style lang="less" >
//轮播图样式

#swpier {
 .van-swipe {
    width: 100%;
    height: 3rem;
    .van-swipe-item {
      padding: 0 0.2rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem;
      }
    }
    .van-swipe__indicator--active {
      background-color: rgb(33, 237, 230);
    }
  }   
}

</style>